<template>
<el-row :gutter="20">
    <el-col :span="8">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="line-height: 36px;">项目视图</span>
            </div>
            <div class="text item" id="project-status">

            </div>
        </el-card>
    </el-col>
    <el-col :span="15">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="line-height: 36px;">运行状态</span>
            </div>
            <div class="text item" id="project-runstatus">
            </div>
        </el-card>
    </el-col>
    <el-col :span="23">
        <el-card class="box-card" style="margin:25px 0px;">
            <div slot="header" class="clearfix">
                <span style="line-height: 36px;">系统运行状态</span>
            </div>
            <div>
                <ul class="sys-status">
                    <li>运行时间：{{status.server_running_time}}</li>
                    <li>所有被分配的内存： {{status.system_status.MemTotal}}</li>
                    <li>当前内存使用量:{{status.system_status.MemAllocated}}</li>
                    <li>进行中任务：{{status.running_tasks}}</li>
                    <li>准备中任务：{{status.prepare_tasks}}</li>
                    <li>成功任务：{{status.success_tasks}}</li>
                    <li>下次 GC 内存回收量:{{status.system_status.NextGC}}</li>
                    <li>距离上次 GC 时间:{{status.system_status.LastGC}}</li>
                    <li>GC 执行次数:{{status.system_status.NumGC}}</li>
                </ul>
            </div>
        </el-card>
    </el-col>
</el-row>
</template>

<script type="text/babel">
import echarts from 'echarts'

export default {
    data: function() {
        return {
            sysDataTime:[],
            sysDataMF:[],
            status:{
                system_status:{}
            },
            task:{},
            TaskEchart: {},
            MemoryEchart: {},
        }
    },
    beforeRouteLeave: function(to, from, next) {
        var _this = this
        window.clearInterval(_this.task)
        next()
    },
    methods: {
        init: function() {
            var _this = this
            _this.TaskEchart = echarts.init(document.getElementById('project-status'))
            _this.TaskEchart.setOption({
                series: {
                    name: '任务数据',
                    type: 'pie',
                }
            })
            _this.TaskEchart.showLoading()
            _this.MemoryEchart = echarts.init(document.getElementById('project-runstatus'))
            _this.MemoryEchart.setOption({
                series: [{
                    name: 'Free Memory',
                    type: 'line',
                    smooth: false,
                    symbol: 'none',
                    stack: 'a',
                    areaStyle: {
                        normal: {}
                    },
                    data: []
                }],
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: [{
                    type: 'value'
                }],
                grid: {
                    containLabel: true,
                }
            })
            _this.MemoryEchart.showLoading()
        },
        initTask: function() {

            var _this = this
            _this.$http.get("http://novel.nightc.com/v1/statuss").then((response) => {
                var body = response.data
                if (body.code == 0) {
                    var i
                    for (i in body.data) {
                        _this.sysDataTime.push(body.data[i].now)
                        _this.sysDataMF.push(body.data[i].system_status.MemFrees)
                    }
                    _this.status = body.data[i]
                    _this.refresh()
                    _this.TaskEchart.hideLoading()
                    _this.MemoryEchart.hideLoading()
                }
            })
            _this.task = setInterval(function() {
                _this.$http.get("http://novel.nightc.com/v1/status").then(function(response) {
                    var body = response.data
                    if (body.code == 0) {
                        _this.sysDataTime.push(body.data.now)
                        _this.sysDataMF.push(body.data.system_status.MemFrees)
                        _this.status = body.data
                    } else {
                        console.log(body.data)
                    }
                })
                if (_this.sysDataTime.length >= 10) {
                    _this.sysDataTime.shift()
                    _this.sysDataMF.shift()
                }
                _this.refresh()
            }, 5000)
        },
        refresh: function() {
            var _this = this
            _this.MemoryEchart.setOption({
                xAxis: {
                    data: _this.sysDataTime
                },
                series: [{
                    name: '内存剩余',
                    data: _this.sysDataMF
                }]
            })
            _this.TaskEchart.setOption({
                series: {
                    data: [{
                        value: _this.status.running_tasks,
                        name: '运行中任务'
                    }, {
                        value: _this.status.prepare_tasks,
                        name: '准备中任务'
                    }, {
                        value: _this.status.success_tasks,
                        name: '完成任务'
                    }]
                }
            })
        }
    },
    mounted: function() {
        var _this = this
        _this.init()
        _this.initTask()
    }
}
</script>

<style lang="css" rel="stylesheet/css">
#status {
    width: 100%;
    height: 100%;
    min-height: 300px;
}

.box-card {
    width: 100%;
}

#project-runstatus,
#project-status {
    min-height: 400px;
}
.sys-status li {
    padding-left:15px;
    display:block;
    height:28px;
    line-height:28px;
    font-size:14px;
}
</style>
